<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素向父元素传值-升级版</title>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js"></script>
</head>
<body>
    <div id="website">
        <ul>
            <!--从父组件传值到子组件-->
            <!--循环传值组件-->
            <!--
                因为父元素的方法可以直接修改父元素的数据 
                所以讲父元素的方法传递给子元素
                然后由子元素进行调用，从而修改父元素的数据
            -->

            <school v-for="item,index in schoolList" :action="changeEvent" :schoolname="item" :key="index"></school>
        </ul>
        <h2>选择的学校是：{{chooseSchool}}</h2>
    </div>

    <script>
        Vue.component("school",{
            props:['schoolname','index','action'],
            template:`<li>
            <h3>{{index}}-学校名称：{{schoolname}}</h3>
            <button @click="chooseEvent(schoolname)">选择学校</button>
            </li>
            ` ,
            methods:{
                chooseEvent:function(schoolname){
                    console.log(schoolname)
                    //console.log(this.action)
                    this.action(schoolname)
                }
            }
        })

        let website=new Vue({
            el:"#website",
            data:{
                schoolList:["清华大学",'北京大学','浙江大学','中山大学'],
                chooseSchool:""
            },
            methods:{
                changeEvent:function(data){
                    this.chooseSchool=data;
                }
            }
        })
    </script>
</body>
</html>